<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>程序员常用的样式</title>

		<style>

			.mydiv{

				width:300px;

				height:300px;

				/*背景色*/

				background-color:blue;

				/*文字颜色*/

				color:white;

				/*让div在网页上居中显示*/

				margin:0 auto;

				/*文字对齐方式，此处是居中对齐*/

				text-align: center;

			}

			

			.uname{

				width: 420px;

				height: 35px;

				border-radius: 5px;

				/*边框宽度1像素、实线、红色边框*/

				/*border: 1px solid red;*/

				/*边框宽度2像素、虚线、黑色边框*/

				border: 2px dotted #299E59; 

				background-color: azure;

			}

		</style>

	</head>

	<body>

		<h1>背景样式</h1>

		<div class="mydiv">

			今天天气不错！

		</div>

		<input type="text" style="background-color: red;"/>

		

		<h1>边框样式</h1>

		用户名<input type="text" class="uname"/>

	</body>

</html>


